<template>
  <div class="blog">
    <header-view
      style="position: fixed; top: 0; width: 100%; z-index: 1000"
    ></header-view>
    <div class="heading" style="margin-top: 70px">
      <h3>我们的博客</h3>
      <div class="linkHome">
        <span class="linkStyle" @click="toHome">主页</span> /
        <span class="normalFont">博客页</span>
      </div>
    </div>
    <div class="shop-container">
      <div class="titled">
        <div class="title">
          <span>博客主页</span>
          <el-link href="#" type="primary" :underline="false"
            >查看更多 >></el-link
          >
        </div>
      </div>
      <div class="blogList-box">
        <div class="blogList" v-for="item in blogList" :key="item.id">
          <div>
            <div class="image">
              <img :src="item.imgSrc" alt="" />
            </div>
            <div class="content">
              <h3>{{ item.title }}</h3>
              <p>
                {{ item.desc }}
              </p>
              <a href="#" class="btn">查看更多</a>
              <div class="icons">
                <a href="#"> <i class="fas fa-calendar"></i>{{ item.tiem }}</a>
                <a href="#"> <i class="fas fa-user"></i>{{ item.auth }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer-view></footer-view>
  </div>
</template>

<script>
import Img1 from "../../assets/image/blog-1.jpg";
import Img2 from "../../assets/image/blog-2.jpg";
export default {
  data() {
    return {
      blogList: [
        {
          imgSrc: Img1,
          designName: "John Deo",
          position: "Designer",
          title: "长在草地上的椅子.....",
          desc: "门前不远就有一块草地，高空俯视很像一艘船，船身绿树成荫，船内碧草萋萋。",
          tiem: "2021年5月21日",
          auth: "Danny",
        },
        {
          imgSrc: Img2,
          designName: "Adeline Adele",
          position: "manager",
          title: "客厅里神奇的沙发.....",
          desc: "它与客厅融为一体，美观大方不优雅。",
          tiem: "2021年5月25日",
          auth: "Tom",
        },
      ],
    };
  },
  setup() {},
  methods: {
    toHome() {
      this.$router.push({ path: "/home" });
    },
  },
};
</script>

<style lang="scss">
.blog {
  background-color: #fff;
  .blogList-box {
    display: flex;
    justify-content: flex-start;
    padding: 0 150px 20px 150px;
    flex-wrap: wrap;
    width: 100%;
    .blogList {
      position: relative;
      overflow: hidden;
      height: 500px;
      width: 364px;
      border: 1px solid #244d4d;
      margin: 0 10px;
      &:hover {
        .share {
          top: 0;
          left: 0;
          visibility: inherit;
        }
      }
      .image {
        height: 250px;
        width: 100%;
        overflow: hidden;
        position: relative;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
      .content {
        padding: 15px 20px;
        h3 {
          font-size: 20px;
          color: #244d4d;
          font-weight: bold;
          margin: 10px 0;
        }
        p {
          height: 50px;
          font-size: 14px;
          color: #779;
          margin: 20px 0;
        }
        .icons {
          height: 50px;
          border-top: 1px solid #244d4d;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          align-items: center;
          a {
            color: #244d4d;
            &:hover {
              color: #584d87;
            }
            i {
              margin: 0 5px;
            }
          }
        }
      }
    }
  }
}
</style>
